<template>
	<view>
		<u-navbar   :is-back="true" title="添加好友" 
					:title-size="36"  
					:background="{ background: '#EDEDED'  }"
					title-color="#404133" 
					:border-bottom="false"  
					z-index="1001">
		</u-navbar>
		
		<view>
			<view class="content_search  u-border-bottom">
				 <view class="u-p-l-20 u-p-r-20">
					<view   style="background-color: #ffffff;border-radius: 16rpx;padding: 20rpx;"
							class="u-flex u-row-left u-col-center  u-tips-color u-font-32" 
							 @click="toSearchFriends()">
						<view>
							<u-icon name="search"></u-icon>
						</view>
						<view class="u-m-l-20">
							<text>搜索手机号</text>
						</view>
					</view> 
				 </view>
				 <view class="u-m-t-20">
					 <u-cell-item   v-for="(cell,cellIndex) in cellList" :key="cellIndex"
									:title="cell.title" :title-style="titleStyle"  
									:label="cell.label" :label-style="labelStyle"
									:border-top="false" :border-bottom="false"
									bg-color="#EDEDED"
									@click="cellClick(cell)">
						 <view slot="icon" class="u-flex u-row-center cellitem" 
								:style="cell.bg?'background-color:'+cell.bg:''">
							 <u-icon :name="cell.iconPath" color="#ffffff" :size="60"></u-icon>
						 </view>
					 </u-cell-item>
				 </view>
			</view>
			
			<view class="u-flex u-row-center u-col-center myQrcodeContainer">
				<view class="myQrcode">
					<view class="u-font-36">
						<text>我的二维码</text>
					</view> 
					 <view class="u-m-t-30 u-m-b-30">
						<u-gap :height="1" bg-color="#979797"  margin-top="1" margin-bottom="1"></u-gap>
					 </view>
					 <view>
						<u-image :width="400" :height="400"  :src="myQrcode"></u-image> 
					 </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import permission from '@/common/mobilePermission/permission.js';
	export default {
		data() {
			return {
				keyword:'',
				myQrcode:'https://hbimg.b0.upaiyun.com/a31a7ba2bd689332d2c69ee69a858c65a695f31134bd6-Vf9bQ6_fw658',
				cellList:[
					{
						title:'扫一扫',
						label:'扫描对方二维码添加好友',
						iconPath:'scan',
						bg:'#FF9F0A'
					},
					/* {
						title:'手机联系人',
						label:'添加通讯录中的朋友',
						iconPath:'/static/image/chat/addFriend/contact.png',
						bg:'#19be6b'
					}, */
				],
				titleStyle:{
					fontSize:'34rpx',
					color:'#000000',
				},
				labelStyle:{
					fontSize:'28rpx',
					color:'#909399'
				}
			};
		},
		methods:{
			cellClick:function(cell){
				if(cell.title=="手机联系人"){
					this.getPhoneContact();
				}
			},
			
			getPhoneContact:function(){
				//请求获取相关权限
				if (uni.getSystemInfoSync().platform == "android") {
				  permission.requestAndroid("android.permission.READ_CONTACTS");//录音
				}else{
				  permission.requestIOS("contact");//ios请求录音权限
				}
				//this.$u.route("/pages/chat/friends/phoneContacts");
			},
			toSearchFriends:function(){
				this.$u.route({
						url:'/pages/search/searchFriend',
						animationType:'fade-in',
						animationDuration:300
					}
				);
			}
		}
	}
</script>

<style lang="scss" scoped>
.content_search {
	padding: 16rpx;
	background-color: #EDEDED;
	padding-bottom: 50rpx;
}
.cellitem{
	width: 70rpx;
	height: 70rpx;
	margin-right: 24rpx;
}
.myQrcodeContainer{
	padding-top: 20%;
	.myQrcode{
		width: 450rpx;
		height: 580rpx;
		background: #EDEDED;
		border-radius: 8px;
		text-align: center;
		padding: 30rpx;
	}
}

</style>
<style>
	page{
		background-color: #ffffff !important;
	}
</style>
